// 定义一个名为 button-counter 的新组件
Vue.component('header-new', {
    props: ['u'],
    data:function (){
        return{
            content:''
        }
    }
    ,
    template: `
        <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="http://www.sinoiov.com/skin/new/img/logo.png">
                </a>
            </div>
            <!--分类开始-->
            <ul class="nav navbar-nav">
                <li><a href="/admin/Mall/indexMall.html">前台商城</a></li>
                <li><a href="/admin/Info/industryInfo.html">资讯页面</a></li>
            </ul>
            
            <ul class="nav navbar-nav  navbar-right">
                <li>
                    <form action="">
                        <input type="text" v-model="content" placeholder="搜索商品">
                        <button type="button" @click="search()">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </li>
<!--                <li>-->
<!--                <div v-if="show1">-->
<!--                  <a  href="/login.html"><i style="color:#000;" class="fa fa-user-circle fa-lg" aria-hidden="true">&nbsp;</i>登录</a></div>-->
<!--                </li>-->
                <li style="color: black;margin-right: 20px" v-show="u.userid==null || u.userid=='' || u.userid==undefined"> 
                    <a class="dropdown-item " href="/login.html">
                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>去登录
                    </a>
                </li>
                <li style="color: black;margin-right: 20px" v-show="u.username=='admin'"> 
                    <a class="dropdown-item " href="/admin/admin/adminindex.html">
                        <i class="fa fa-grav" aria-hidden="true"></i>管理后台
                    </a>
                </li>
                <li>
                <div class="dropdown" style="margin-top: 14px;margin-right: 20px"   v-show="u.userid!=null && u.userid!='' && u.userid!=undefined">
                    <a data-toggle="dropdown" style="display:block;overflow: hidden;padding: 0;text-decoration: none">
                   
                                    <img src="/moren.jpg" v-show="u.url=='' || u.url==null"  style="height: 25px;width: 25px;border-radius: 10000px;" alt="小熊饼干头像">
                                    <img v-show="u.url!='' && u.url!=null" :src="u.url" style="height: 25px;width: 25px;border-radius: 10000px;" >
                            
                    <i class="fa fa-angle-down" aria-hidden="true" v-text="u.nick"></i> 
                    </a>
                    <div class="dropdown-menu" style="min-width: 70px;" >
                    <ul style="padding: 0;list-style-type: none">
                    <li><a class="dropdown-item "   @click="logOut" href="javascript:void(0)" >退出登录</a></li>
                    <li><a class="dropdown-item "  href="../Mall/geren.html">个人中心</a></li>
                    <li><a class="dropdown-item "  href="shopAll.html">购物车</a></li>
                    <li><a class="dropdown-item "  href="../Mall/transAll.html">我的订单</a></li>
                    </ul>
                    </div>
                </div>
                </li>
            </ul>

        </div>
    </nav>
    `
    ,methods:{
        logOut:function (){
            swal("您确定要登出吗", "舍不得您!", "warning", {
                button: "我走了",
            }).then((value) => {
                if (value == true) {
                    axios.post("/logOut").then(function (){
                        location.href="/admin/Mall/indexMall.html"
                    })
                }
            })
        },
        search:function () {
            //this代表当前自定义的模板组件 this.wd会去上面的data中找到wd
            location.href="/admin/Mall/indexMallSearch.html?content="+this.content;
        },
        shopAll:function (){
            location.href="shopAll.html?id="+header_v.userid;
        }
    }
})


$(function () {
    dropdownOpen();

});

function dropdownOpen(){
    $('.dropdown').mouseover(function(){
        $(this).addClass('show');
        //查找当前元素子节点中的对象，修改其class，这样
        //这样当有多个下拉菜单时，可以分别独立处理，而不会出现都下拉的bug
        $(this).find(".dropdown-menu").addClass('show');

    }).mouseout(function(){

        $(this).find(".dropdown-menu").removeClass('show');
        $(this).removeClass('show');
    });
}